<!--  -->
<template>
  <div class="read-report-wrap">
    <div class="chose-course-top">
      <div class="header-left">
        <span class="back-arrow" @click="() => this.$router.go(-1)"></span>
      </div>
      <div class="course-title">
        答题分析
      </div>
      <div class="btn-group"></div>
    </div>
    <div class="list-wrap">
      <div class="report-content">
        <div class="report-main">
          <div class="report-rightper">
            <span>{{ reportInfo.result.right_percent }}%</span>
            <span>正确率</span>
          </div>
          <div class="report-total">
            <span
              >总题数 <i>{{ reportInfo.result.subject_num }}</i
              >题</span
            >
            <span
              >答对 <i>{{ reportInfo.result.right_num }}</i
              >题</span
            >
            <span
              >答题用时
              <i>{{ reportInfo.result.spent_time | mmssFilter }}</i></span
            >
          </div>
          <div class="report-subs">
            <span
              v-for="option in selectList"
              :key="`option${option.id}`"
              :class="{ 'sub-error': !option.right }"
            >
              {{ option.id }}
            </span>
          </div>
          <div class="report-msg">
            <span
              >本篇文章您还可以做<i>{{ reportInfo.result.remainnum }}</i
              >次</span
            >
            <span>提交时间： {{ reportInfo.result.create_time }}</span>
          </div>
        </div>
        <div class="report-btns">
          <a-button
            class="btn-item"
            type="primary"
            shape="round"
            @click="goAnalysis"
            >查看解析</a-button
          >
        </div>
      </div>
    </div>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>

<script>
import { readReport } from "@/services/super-read";
import { SUCCESS_CODE } from "@/utils/const";
import { mapState, mapMutations } from "vuex";
import Timetips from "@/components/Timetips";
import _ from 'lodash'
export default {
  components: {
   Timetips
  },
  data() {
    return {
      reportInfo: {
        result: {},
      },
      selectList: [],
    };
  },
  computed: {
    ...mapState({
      readCourseInfo: state => state.readCourseInfo,
      readCurrent: state => state.readCurrent,
      readReport: state => state.readReport
    })
  },
  watch: {},
  methods: {
    ...mapMutations(["setReadReport", "setReadBroadModal"]),
    readMain() {
      this.setReadBroadModal({
        visible: true,
        mainidea: this.reportInfo.mainidea,
      });
    },
    goAnalysis() {
      if (6 === +this.reportInfo.question_type) {
        this.$router.push({
          path: "/super-read/analysis-blank",
        });
      } else if (1 === +this.reportInfo.question_type) {
        this.$router.push({
          path: "/super-read/analysis",
        });
      }
    },
  },
  async created() {
    let id = '',
    res = {},
    detail;
    if (+this.$route.query.id !== +this.readReport.id) {
      id = this.$route.query.id
      try {
        this.$loading.show()
        res = await readReport({
        id: this.$route.query.id,
        question_type: this.readCurrent.question_type,
        })
        if (res.code !== SUCCESS_CODE) {
          return
        } else {
          this.setReadReport(res.data);
          detail = res.data
        }
        this.$loading.hide()
      } catch {
        this.$loading.hide()
      }
    } else {
      detail = _.cloneDeep(this.readReport)
    }
    this.reportInfo = _.cloneDeep(detail);
    let { result, subjects } = detail;
    let stuAnswer = result.select_option.split(",");
    let selectList = [];
    subjects.forEach((option, index) => {
      console.log(option, index);
      if (+option.right_option === +stuAnswer[index]) {
        selectList.push({ id: option.id, right: true });
      } else {
        selectList.push({ id: option.id, right: false });
      }
    });
    this.selectList = selectList;
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  destroyed() {},
  activated() {},
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
};
</script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
@import url("./index.less");
</style>
